<template>
	<div class="x-login-container">
		<div class="x-login-body">
			<transition :appear="true" enter-active-class="animate__animated animate__bounceInDown" leave-active-class="animate__animated animate__bounceIn">
				<div class="x-login-window" v-if="data.show" :style="{ '--colorPrimary': token.colorPrimary,'--colorPrimaryActive': token.colorPrimaryActive,'--colorInfoBg':token.colorInfoBg }">
					
					<div class="x-login-window-zone">
						<div class="x-login-window-logo">
							<img src="../assets/logo.png" width="450" />
						</div>
					</div>
					<div class="x-login-window-zone">
						<div class="x-login-window-data">
							<div class="x-login-window-data-item">
								<div class="x-login-window-data-form-title">
									11111111
								</div>
							</div>
							<div class="x-login-window-data-item">
								<input class="x-login-form-input" type="text" name="email" placeholder="Email">
							</div>
							<div class="x-login-window-data-item">
								<input class="x-login-form-input" type="password" name="email" placeholder="Email">
							</div>
							<div class="x-login-window-data-item">
								<button class="x-login-form-button" @click="onLogin">Login</button>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script setup>
	import { reactive, onMounted, } from 'vue';
	import PageUtil from '@/utils/PageUtil';
	import { theme } from 'ant-design-vue';
	
	const { useToken } = theme;
	const { token } = useToken();
	
	const data = reactive({
		select:false,//是否选择记住
		loginId:"",
		show:false,
	});
	
	onMounted(async ()=>{
		await console.info("->Login onMounted");
		 data.show = true;
	});
	
	const onLogin = function() {
		PageUtil.goHome();
	}
</script>

<style scoped>
	.x-login-container {
		width: 100%;
		height: 100%;
	}
	
	.x-login-body {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
		background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
		background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
		background: linear-gradient(-135deg, #c850c0, #4158d0);
	}
	
	.x-login-window {
		width: 65%;
		height: 65%;
		border-radius: 1rem;
		box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.3);
		background: rgba(255,255,255, 0.99);
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.x-login-window-content {
		width:100% ;
		height: 95%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.x-login-window-zone {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.x-login-window-logo {
		width: 60%;
		height: 60%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img {
			vertical-align: middle;
			border-style: none;
		}
	}
	
	.x-login-window-data {
		width: 90%;
		height: 60%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.x-login-window-data-item {
		width: 95%;
		height: 15%;
		padding: 0.5rem 1.5rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.x-login-window-data-form-title {
	  font-family: Poppins-Bold;
	  font-size: 2rem;
	  color: rgba(0, 0, 0, 0.88);
	  line-height: 1.2;
	  text-align: center;
	  width: 100%;
	  display: block;
	  padding-bottom: 54px;
	}
	
	.x-login-form-input {
		font-family: Poppins-Medium;
		font-size: 15px;
		line-height: 1.5;
		color: rgba(0, 0, 0, 0.8);
		display: block;
		width: 100%;
		background: var(--colorInfoBg,#e6e6e6);
		height: 50px;
		border-radius: 25px;
		padding: 0 30px 0 68px;
		outline: none;
		border: none;
	}
	
	.x-login-form-input:focus {
	  -webkit-animation: anim-shadow 0.5s ease-in-out backwards;
	  animation: anim-shadow 0.5s ease-in-out backwards;
	}
	
	.x-login-form-button {
		color: rgba(255,255,255,0.8);
		display: block;
		width: 100%;
		background: var(--colorPrimary,rgba(30, 0, 210, 0.8));
		height: 50px;
		border-radius: 25px;
		align-items: center;
	}
	.x-login-form-button:active {
	  transform: translateY(0.1rem);
	}
	.x-login-form-button:hover {
		background: var(--colorPrimaryActive,rgba(30, 0, 210, 0.8));;
	}
</style>
<style>
	@-webkit-keyframes anim-shadow {
	  to {
	    box-shadow: 0px 0px 70px 25px;
	    opacity: 0;
	  }
	}
	@keyframes anim-shadow {
	  to {
	    box-shadow: 0px 0px 70px 25px;
	    opacity: 0;
	  }
	}
</style>